<template>
  <div class="flex-col page section">
    <div class="flex-col">
      <c-title :hide="false" text="我的部门"></c-title>
    </div>
    <div class="flex-col group">
      <div class="flex-row section_4">
        <div class="flex-col flex-1">
          <span class="font">部门人数</span>
          <span class="font_1 mt-13">{{departmentPeople}}人</span>
        </div>
        <div class="flex-col flex-1">
          <span class="font">部门业绩</span>
          <span class="font_1 mt-13">{{ departmentNum }}</span>
         
        </div>
        <div class="flex-col flex-1">
          <span class="font">小部门业绩</span>
          <span class="font_1 mt-13">{{ sdepartmentNum }}</span>
        </div>
      </div>
      <div class="flex-row justify-between items-center section_5">
        <div class="flex-row flex-1">
          <img class="shrink-0 image_5" src="../../../assets/images/new/search-icon.png" />
          <!-- <span class="font_3 text_5 ml-4-5">搜索会员名称</span> -->
           <input type="text" class="font_3 text_5 ml-4-5 flex-row flex-1" v-model="userName" placeholder="搜索会员名称">
        </div>
        <div @click="search" class="flex-col justify-start items-center text-wrapper"><span class="text_6">搜索</span></div>
      </div>
      <div class="flex-col list">
        <div class="flex-row justify-between items-center mt-12 list-item" v-for="(item, index) in list" :key="index">
          <div class="flex-row">
            <img class="image_6" :src="item.avatar" />
            <div class="flex-col ml-7-5">
              <div class="flex-row items-center">
                <span class="font_4 text_7">{{ item.mobile | formatPhoneNumber }}({{ item.num == 1 ? 'A' : item.num == 2 ?  'B' : item.num >= 3 ? `C${Number(item.num)-2}` : ''}}区)</span>
                <div v-if="item.vip" class="ml-2 flex-col justify-start items-center shrink-0 text-wrapper_2">
                  <span class="font_5">{{ item.vip }}</span>
                </div>
              </div>
              <div class="flex-col mt-6-5">
                <div class="flex-row items-end group_3">
                  <div class="flex-row items-center self-stretch">
                    <span class="font_8 text_9" v-if="item.realname == ''">未实名</span>
                    <span class="font_10 text_9" v-else>已实名</span>
                    <!-- <span>{{ item.mobile | formatPhoneNumber }}</span> -->
                  </div>
                </div>
                <div class="mt-6-5 flex-row items-center">
                  <img class="shrink-0 image_9" src="https://shops.cg500.com/static/niuniu-teamnum-list-time.png" />
                  <span class="ml-2 time">{{ item.create_at }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-col flex-1 items-end">
            <div class="flex-row items-baseline">
              <span class="font_6 text_8">{{ item.rensu }}</span>
              <span class="font_7 ml-3">人</span>
            </div>
            <div class="flex-row items-baseline mt-13 justify-end">
              <div class="group_5">
                <span class="font_6">{{ item.yeji }}</span>
              </div>
              <span class="font_7 text_10">元</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
      
      <script>
import myDepartmentController from "./myDepartmentController";

export default myDepartmentController;
</script>
      <style>
body {
  /* background: #fff; */
  background-color: #f5f7fa;
}
#app {
  background-color: #f5f7fa;
}
</style>
      
      <style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .van-nav-bar {
  border-bottom: none !important;
  background: rgba(0, 0, 0, 0) !important;
}
::v-deep .van-button--default {
  background: none !important;
}
::v-deep .van-nav-bar__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #151515 !important;
}
//   @import "../common/common.css";
@import "../../../assets/css/commoncss/common.css";
.mt-12-5 {
  margin-top: 0.78rem;
}
.ml-7-5 {
  margin-left: 0.47rem;
}
.ml-4-5 {
  margin-left: 0.28rem;
}
.mt-6-5 {
  margin-top: 0.41rem;
}
.ml-61 {
  margin-left: 3.81rem;
}
.ml-3 {
  margin-left: 0.19rem;
}
.mt-13 {
  margin-top: 0.81rem;
}
.page {
  padding-bottom: 11.28rem;
  background-color: #f5f7fa;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.section {
  background-color: #ffffff;
  background-image: linear-gradient(0deg, #f5f7fa 0%, #e5fcfa 99%, #e5fcfa 100%);
}
.section_2 {
  background-image: linear-gradient(0deg, #f5f7fa 0%, #e5fcfa 99%, #e5fcfa 100%);
  height: 7.13rem;
}
.image {
  width: 20.47rem;
  height: 0.75rem;
}
.pos {
  position: absolute;
  right: 1.13rem;
  top: 1.03rem;
}
.image_2 {
  width: 0.63rem;
  height: 1.09rem;
}
.pos_3 {
  position: absolute;
  left: 0.59rem;
  bottom: 2.72rem;
}
.text {
  color: #222222;
  font-size: 1.13rem;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 1.06rem;
}
.pos_4 {
  position: absolute;
  left: 50%;
  bottom: 2.78rem;
  transform: translateX(-50%);
}
.section_3 {
  padding: 0.44rem 0.84rem;
  background-color: #ffffffe6;
  border-radius: 0.99rem;
  width: 5.47rem;
}
.pos_2 {
  position: absolute;
  right: 0.69rem;
  top: 2.94rem;
}
.image_3 {
  width: 1.94rem;
  height: 1.19rem;
}
.image_4 {
  width: 1.09rem;
  height: 1.09rem;
}
.group {
  margin-top: 0.47rem;
  padding: 0 0.88rem;
}
.section_4 {
  padding: 1.5rem 0.54rem 1.34rem;
  background-image: linear-gradient(-49deg, #08c2b4 0%, #02cbba 100%);
  box-shadow: 0rem 0.38rem 0.56rem #08958a1a;
  border-radius: 0.5rem;
}
.font {
  font-size: 0.81rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.font_1 {
  font-size: 0.81rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  width: 100%;
  word-break: break-all;
}
.text_2 {
  margin-right: 0.38rem;
}
.group_2 {
  padding: 0 0.56rem;
}
.font_2 {
  font-size: 0.81rem;
  font-family: PingFang SC;
  line-height: 0.59rem;
  font-weight: 500;
  color: #ffffff;
}
.text_3 {
  margin-left: 3.34rem;
  line-height: 0.63rem;
}
.text_4 {
  margin-left: 2.53rem;
  line-height: 0.63rem;
}
.section_5 {
  margin: 0.97rem 0.44rem 0;
  padding-left: 1.25rem;
  padding-right: 0.063rem;
  background-color: #ffffff;
  border-radius: 1rem;
}
.image_5 {
  width: 0.75rem;
  height: 0.75rem;
}
.text-wrapper {
  padding: 0.63rem 0;
  background-color: #07c2b4;
  border-radius: 1rem;
  width: 4.84rem;
  height: 2rem;
}
.text_6 {
  color: #ffffff;
  font-size: 0.75rem;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 0.72rem;
}
.list {
  padding-top: 0.94rem;
}
.list-item {
  padding: 1.25rem 0.94rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
}
.list-item:first-child {
  margin-top: 0;
}
.image_6 {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
.font_4 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.78rem;
  font-weight: 500;
  color: #222222;
}
.text_7 {
  line-height: 0.81rem;
}
.font_3 {
  font-size: 0.69rem;
  font-family: PingFang SC;
  line-height: 0.69rem;
  color: #999999;
}
.time {
  font-size: 0.69rem;
  font-family: PingFang SC;
  color: #999999;
  
}
.text_5 {
  line-height: 0.66rem;
  width: 100%;
  border: none;
}
.text-wrapper_2 {
  padding: 0.19rem 0;
  background-image: linear-gradient(-90deg, #ff9100 0%, #ff9100 0%, #ffb421 100%);
  border-radius: 0.5rem;
  width: 3.25rem;
  height: 1rem;
}
.font_5 {
  font-size: 0.63rem;
  font-family: PingFang SC;
  line-height: 0.59rem;
  color: #ffffff;
}
.group_3 {
  padding: 0 0.13rem;
}
.group_4 {
  height: 0.94rem;
}
.image_7 {
  margin-top: 0.41rem;
  width: 0.56rem;
  height: 0.53rem;
}
.font_8 {
  font-size: 0.63rem;
  font-family: PingFang SC;
  line-height: 0.59rem;
  color: #ff9200;
}
.font_10 {
  font-size: 0.63rem;
  font-family: PingFang SC;
  line-height: 0.59rem;
  color: #008a7f;
}
.image_8 {
  width: 0.56rem;
  height: 0.56rem;
}
.image_9 {
  width: 0.63rem;
  height: 0.63rem;
  margin: 0;
}
.font_6 {
  font-size: 1rem;
  font-family: PingFang SC;
  line-height: 0.78rem;
  color: #008a7f;
  word-break: break-all;
}
.text_8 {
  margin-left: 3rem;
}
.font_7 {
  font-size: 0.63rem;
  font-family: PingFang SC;
  line-height: 0.59rem;
  color: #999999;
}
.text_9 {
  // margin-top: -0.94rem;
}
.group_5 {
  line-height: 0.78rem;
  // height: 0.78rem;
  width: 100%;
}
.font_9 {
  font-size: 0.75rem;
  font-family: PingFang SC;
  line-height: 0.59rem;
  color: #008a7f;
}
.text_10 {
  line-height: 0.56rem;
}
</style>
      